본문으로 건너뛰기

useTransition

🧑🏻‍💻 useTransition​

useTransition 은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다.

✅ useTransition 문법​

const [isPending, startTransition] = useTransition()
  • useTransition은 매개변수, 반환값이 없다.
  • isPending 은 보류 중인 트랜지션이 있는지를 알려준다.
  • startTransition 은 state 업데이트를 트랜지션으로 표시할 수 있는 함수이다.

🧑🏻‍💻 알고 가기​

✅ useTransition 사용 효과​

  • 리렌더링 도중에도 UI가 반응성을 유지한다. 예를 들어, 사용자가 탭을 클릭했다가 마음이 바뀌어 다른 탭을 클릭하면 첫 번째 리렌더링이 완료될 때까지 기다릴 필요 없이 다른 탭을 클릭할 수 있다. (논블로킹)
  • 느린 디바이스에서도 사용자 인터페이스 업데이트의 반응성을 유지할 수 있다.

✅ startTransition 함수 사용법​

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

  • state가 로딩 중일 때 startTransition함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다

  • startTransition 함수는 매개 변수로 state를 업데이트하는 함수인 scope를 받는다.

  • scope는 동기식이어야 하며, React는 매개변수 없이 scope를 즉시 호출하고 scope 함수 호출 중에 동기적으로 예약된 모든 state 업데이트를 트랜지션으로 표시한다. 이는 논블로킹이고, 로딩을 표시하지 않는다.

  • 부모 컴포넌트에서 받아온 prop에 state를 변경하는 로직이 있다면, 해당 prop을 startTransition 함수로 감싸도 state 업데이트를 트랜지션으로 표시할 수 있다.

  • 트렌지션 업데이트는 텍스트 입력(input)을 제어하는 데 사용할 수 없다.

✅ 언제 사용하는지​

  • 트랜지션으로 표시된 state업데이트는 다른 state의 업데이트에 의해 중단되기 때문에 state 변경이 일어날 시, 바로 즉시 기존 이벤트에서 다른 이벤트로 넘어갈 수 있다.
import { useTransition } from 'react';

export default function TabButton({ children, isActive, onClick }) {
  const [isPending, startTransition] = useTransition();
  if (isActive) {
    return <b>{children}</b>
  }
  if (isPending) {
    return <b className="pending">{children}</b>;
  }
  return (
    <button onClick={() => {
      startTransition(() => {
        onClick();
      });
    }}>
      {children}
    </button>
  );
}
  • isPending 상태를 활용해서 로딩을 구현할 수도 있다.
  • Suspense가 도입된 라우터에서 페이지 내비게이션을 트랜지션으로 표시할 때 사용한다.

🧑🏻‍💻 활용 및 생각할 거리​

✅ useTransition과 일반 state 업데이트의 차이점​

트랜지션에서 현재 탭 업데이트하기

state 업데이트는 트랜지션으로 표시되므로 느리게 다시 렌더링해도 사용자 인터페이스가 멈추지 않는다. 사용성을 개선할 수 있다.

트랜지션 없이 현재 탭 업데이트하기

속도가 느려진 탭을 렌더링하는 동안 앱이 멈추고 UI가 응답하지 않는 것을 확인할 수 있다. state 업데이트는 트랜지션이 아니므로 느리게 다시 렌더링하면 사용자 인터페이스가 정지된다.